<template>
  <div>
    <section id="article" class="shadow-blue white-bg padding">
      <h3 class="section-title">Article</h3>
      <div class="spacer" data-height="30"></div>
      <!-- 文章目录展现 (PC) -->
      <ul class="portfolio-filter list-inline">
        <li class="current list-inline-item" @click="getArticleDefault()">Last Update</li>
        <li v-for="(menu) in article_menus" class="list-inline-item"u
            @click="getArticleWithCate(menu.menu_code)"> {{ menu.menu_name }}
        </li>
      </ul>

      <!--
      todo:
          show the article lists by using mobile-end menu is not available yet
      -->
      <!-- 文章目录展现 (移动设备) -->
      <div class="pf-filter-wrapper mb-4">
        <select class="portfolio-filter-mobile">
          <option value="*">Last update</option>
          <option v-for="(menu) in article_menus" :value="'.'+menu.menu_code.toLowerCase()">
            {{ menu.menu_name }}
          </option>
        </select>
      </div>
      <!-- loading -->
      <div v-show="!is_loaded" class="row portfolio-wrapper-unit portfolio-wrapper-unit-loading">
        <xloading></xloading>
      </div>
      <!-- item -->
      <div v-show="is_loaded" class="row portfolio-wrapper-unit">
        <!-- portfolio item -->
        <div v-for="(article,key) in article_lists"
             class="col-md-4 col-sm-6 grids-item" :key="key">
          <a>
            <div class="portfolio-item">
              <div class="details">
                <h4 class="title">{{ article.article_name }}</h4>
              </div>
              <span class="plus-icon" @click="toArticlePage(article.pk,article.article_name)">→</span>
              <div class="thumb">
                <v-img :lazy-src="ftpIP + '/image' + article.article_image"
                       :src="ftpIP + '/image' + article.article_image"
                       :alt="article.article_name"
                       aspect-ratio="1.6"/>
                <div class="mask"></div>
              </div>
            </div>
          </a>
        </div>
      </div>

      <!-- more button -->
      <div class="load-more text-center mt-4">
        <a href="javascript:" @click="toArticleList" class="btn btn-default">SHOW MORE</a>
        <!-- numbered pagination (hidden for infinite scroll) -->
        <ul class="portfolio-pagination list-inline d-none">
          <li class="list-inline-item">1</li>
          <li class="list-inline-item"><a href="#">2</a></li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>
import xloading from "@/common/utils/util/loading"
import {setSectionArticleStyle} from "../../../public/static/js/section-article";
import {getArticleAPI, getArticleWithCateAPI} from "@/components/utils/api";

export default {
  name: "section_article",
  components: {
    xloading
  },
  mounted() {
    this.getArticleDefault()
    this.$nextTick(() => {
      setSectionArticleStyle()
    })
  },

  data() {
    return {
      article_menus: [],
      article_lists: [],
      ftpIP: this.$FTPReIP,
      article_cate: '',
      is_loaded: false,
    }
  },

  methods: {
    //展现全部
    toArticleList() {
      let routeData = this.$router.resolve({path: '/article_list'});
      window.open(routeData.href, '_target')
    },
    // 页面跳转
    toArticlePage(articleId, articleName) {
      let q = {
        articleId: articleId
      }
      let routeData = this.$router.resolve({path: '/article', query: q});
      window.open(routeData.href, '_blank');
    },
    getArticleDefault() {
      this.is_loaded = false
      getArticleAPI().then(res => {
        if (res.res_status === 200) {
          if (!this.is_loaded) {
            this.is_loaded = true
          }
          //目录
          this.article_menus = res.note_menu_data;
          //初始展现的6篇文章
          this.article_lists = res.note_article_data;
          this.article_cate = 'recently-reading';
        }
      }).catch(err => {
        console.error(err)
      })
    },
    getArticleWithCate(menu_code) {
      this.article_lists = []
      this.is_loaded = !this.is_loaded
      getArticleWithCateAPI(menu_code).then(res => {
        if (res.res_status === 200) {
          this.article_lists = res.note_article_data;
          this.article_cate = menu_code;
        }
      }).catch(err => {
        console.error(err)
      }).finally(() => {
        this.is_loaded = true
      })
    }
  },
}
</script>

<style scoped>

</style>